import React, {PureComponent} from "react";
import {View, Text, StyleSheet, ScrollView, Image} from "react-native";
import NavigationItem from "../../common/widget/NavigationItem";
import SpacingView from "../../common/widget/SpacingView";
import DetailCell from "../../common/widget/DetailCell";
import color from "../../util/color";
import {CustomAnimation} from "react-native-tabbar-animated";
import {Spruce, CorneredSort, DefaultAnimations} from "react-native-spruce";
type Props = {}

type State = {
    isRefreshing: boolean,
}

class MineScene extends PureComponent<Props, State> {

    renderCells() {
        let cells = []
        let dataList = this.getDataList()
        for (let i = 0; i < dataList.length; i++) {
            let sublist = dataList[i]
            for (let j = 0; j < sublist.length; j++) {
                let data = sublist[j]
                let cell = <DetailCell image={data.image} title={data.title} subtitle={data.subtitle} key={data.title}/>
                cells.push(cell)
            }
            cells.push(<SpacingView key={i}/>)
        }

        return (
            <View style={{flex: 1}}>
                {cells}
            </View>
        )
    }

    renderHeader() {
        let sortWith = new CorneredSort(100);
        // let animateWith = DefaultAnimations.shrinkAnimator(1000)
        let animateWith = DefaultAnimations.fadeInAnimator(1000)
        return (
            <Spruce sortWith={sortWith} animateWith={animateWith}
                    animator={{ propertyName: "translationX", values: [5000, 0], duration: 1500 }}>
                <View style={styles.header}>
                    <Image style={styles.avatar} source={{
                  uri: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1899364525,2642789285&fm=27&gp=0.jpg',
                }}/>
                </View>
            </Spruce>
        )
    }

    render() {
        let sortWith = new CorneredSort(100);
        let animateWith = DefaultAnimations.shrinkAnimator(1000)
        return (

            <View style={{flex: 1, backgroundColor: color.paper}}>
                <Spruce sortWith={sortWith} animateWith={animateWith}
                        animator={{ propertyName: "translationY", values: [5000, 0], duration: 800 }}>
                    <View>
                        <ScrollView>
                            {this.renderHeader()}
                            <SpacingView />
                            {this.renderCells()}
                        </ScrollView>
                    </View>
                </Spruce>
            </View>
        )
    }

    getDataList() {
        return (
            [
                [
                    {title: '我的地址', image: require('../../../res/img/mine/wodezidhi.png')},
                    {title: '课程作业', image: require('../../../res/img/mine/kechengzuoye.png')},
                    {title: '我的收藏', image: require('../../../res/img/mine/wodeshoucang.png')},
                    {title: '给我评分', image: require('../../../res/img/mine/geiwopingfen.png')},
                    {title: '意见反馈', image: require('../../../res/img/mine/icon_mine_aboutmeituan.png')},
                    {title: '客服电话', image: require('../../../res/img/mine/kefudianhua.png')},
                    {title: '关于菁课在线', image: require('../../../res/img/mine/guanyuwomen.png')}
                ]
            ]
        )
    }

}


const styles = StyleSheet.create({
    header: {
        backgroundColor: color.primary,
        paddingBottom: 50,
        alignItems: 'center',
        paddingTop: 50
    },
    avatar: {
        width: 80,
        height: 80,
        marginRight: 10,
        borderRadius: 40,
        borderWidth: 2,
        borderColor: color.primary
    }
})


export default MineScene
